<template>
    <div class="affirm">
        <div class="affirmH">
            <div class="affirmHt">
                <i><svg t="1655537506694" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="8939" width="100" height="100">
                        <path
                            d="M758.722706 194.015785c27.265994 0 49.344848-21.36561 49.344848-47.698349L808.067554 50.918693c0-26.349111-22.078855-47.713698-49.344848-47.713698-27.267017 0-49.346895 21.364587-49.346895 47.713698l0 95.398744C709.377858 172.650175 731.457736 194.015785 758.722706 194.015785z"
                            p-id="8940" fill="#1296db"></path>
                        <path
                            d="M265.275247 194.015785c27.267017 0 49.345871-21.36561 49.345871-47.698349L314.621119 50.918693c0-26.349111-22.078855-47.713698-49.345871-47.713698-27.265994 0-49.343825 21.364587-49.343825 47.713698l0 95.398744C215.932446 172.650175 238.0113 194.015785 265.275247 194.015785z"
                            p-id="8941" fill="#1296db"></path>
                        <path
                            d="M939.642219 98.617042l-82.229816 0 0 47.698349c0 52.667523-44.188408 95.398744-98.688673 95.398744s-98.686626-42.73122-98.686626-95.398744L660.037103 98.617042l-49.344848 0-3.291976 0c0-1.11745-40.900525 0-95.40079 0s-95.39772 0.496304-95.39772 0l-3.294023 0-49.344848 0 0 47.698349c0 52.667523-44.155662 95.398744-98.68765 95.398744-54.499242 0-98.688673-42.73122-98.688673-95.398744L166.586574 98.617042 84.356758 98.617042c-27.265994 0-49.345871 21.366633-49.345871 47.698349l0 826.77922c0 26.333762 22.079878 47.699372 49.345871 47.699372l855.287507 0c27.265994 0 49.344848-21.36561 49.344848-47.699372L988.989113 146.31539C988.987067 119.983675 966.907189 98.617042 939.642219 98.617042zM725.817272 861.794711 298.180681 861.794711c-19.682271 0-35.643802-15.96153-35.643802-35.633568 0-19.684318 15.96153-35.645848 35.643802-35.645848l427.635567 0c19.684318 0 35.645848 15.96153 35.645848 35.645848C761.46312 845.833181 745.50159 861.794711 725.817272 861.794711zM725.817272 677.599595 298.180681 677.599595c-19.682271 0-35.643802-15.96153-35.643802-35.633568 0-19.684318 15.96153-35.645848 35.643802-35.645848l427.635567 0c19.684318 0 35.645848 15.96153 35.645848 35.645848C761.46312 661.638065 745.50159 677.599595 725.817272 677.599595zM725.817272 493.40448 298.180681 493.40448c-19.682271 0-35.643802-15.962553-35.643802-35.634592 0-19.683295 15.96153-35.643802 35.643802-35.643802l427.635567 0c19.684318 0 35.645848 15.960507 35.645848 35.643802C761.46312 477.44295 745.50159 493.40448 725.817272 493.40448z"
                            p-id="8942" fill="#1296db"></path>
                    </svg></i>
                <h2>订单提交成功,快去付款吧 ~ </h2>
                <p>请在<a href="">1小时</a>内完成支付,逾期订单将被取消</p>
            </div>

            <div class="detail">
                <div>
                    <span style="font-size:16px">应付金额:</span>
                    &nbsp;&nbsp;<span style="font-size:20px;color:deepskyblue">￥{{ data.orderData.payment }}.00</span>
                </div>

                <div>
                    <span style="font-size:16px">订单编号:</span>&nbsp;&nbsp;
                    <span style="font-size:12px">{{ data.orderData.orderid }}</span>
                </div>
                <div>
                    <span style="font-size:16px">收货地址:</span>
                    &nbsp;
                    <span>{{ data.orderData.name }}</span>
                    &nbsp;
                    <span>{{ data.orderData.phone }}</span>
                    &nbsp;
                    <span>{{ data.orderData.addressProvince+data.orderData.addressCity+data.orderData.addressDistrict+data.orderData.addressDefaultAddress }}</span>
                </div>
                <div>
                    <span style="font-size:16px">发票抬头:</span>&nbsp;&nbsp;<span>个人</span>
                </div>
            </div>
        </div>
        <div class="affirmHb">
            <el-button color="#626aef" :dark="isDark" @click="payment" class="affirmHbs">立即付款</el-button>
        </div>
    </div>
</template>
<style lang="less" scoped>



.affirm{
    width: 1200px;
   padding: 0 150px;
  .affirmH{
      border-bottom:1px solid #ccc ;
      height: 500px;
     .affirmHt{
         text-align: center;
         padding-top:80px ;
         h2{
             font-size: 18px;
             padding:20px 0 ;
         }
         p{
             a{
                 color: rgb(122, 122, 217);
                 text-decoration: none;
             }
         }
     } 
  }
  .affirmHb{
      padding:100px 0;

    .affirmHbs{
        width: 200px;
        height: 60px;
    }
  }
}
.affirm .affirmHb {
    margin-left: 1000px
}
.detail{
    margin-top:80px;
    div{
        margin: 10px 0;
    }
}
</style>
<style>
.el-popup-parent--hidden {
  padding: 0 !important;
}
</style>

<script>

import {onMounted, getCurrentInstance, reactive} from 'vue'
import { h } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from "vue-router";

export default {
    
  setup(){
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    let data =reactive({
      orderData: {
        payment: 0,
        orderid: '未知',
        name: '未知',
      }
    })
    let order_id = sessionStorage['orderid'];
    // 获取订单信息
    onMounted(()=>{
      PubSub.publishSync('item', 2);

      if (order_id){
        proxy.$get('/api/data/order',{order_id}).then((date)=>{
          // console.log(date);
          data.orderData = date;
        })
      }
    })
    // 支付按钮
    let payment = ()=>{
      proxy.$post('/api/order/overtime',{id:order_id})
          .then((val)=>{
            if (val.code===200){
              ElMessageBox({
                title: '支付中',
                message: h('div', null, [
                  h('p',[
                    h('span', null, '默认支付方式'),
                    h('i', { style: 'color: teal' }, '微信'),
                  ]),
                  h('div',{ style: 'width: 200px; margin: 10px auto;' },[
                      h('img',{ src: '/images/cart/wx.jpg',alt: '微信支付',width: 200 })
                  ])
                ]),
                showCancelButton: true,
                confirmButtonText: '完成支付',
                cancelButtonText: '取消',
                beforeClose: (action, instance, done) => {
                  if (action === 'confirm') {
                    instance.confirmButtonLoading = true
                    instance.confirmButtonText = 'Loading...'
                    setTimeout(() => {
                      done()
                      setTimeout(() => {
                        instance.confirmButtonLoading = false
                      }, 300)
                    }, 3000)
                  } else {
                    done()
                  }
                },
              }).then((action) => {
                if (order_id){
                  proxy.$post('/api/order/success',{order_id}).then((data)=>{
                    // console.log(data);
                    ElMessage({
                      type: 'success',
                      message: `支付成功`,
                    })
                    sessionStorage.removeItem('orderid');
                    router.push('/');
                  })
                }
              }).catch(()=>{
                ElMessage({
                  type: 'info',
                  message: `已取消支付`,
                })
              })
            }else {
              ElMessage({
                type: 'warning',
                message: val.msg,
              })
              router.push('/');
            }
            // console.log(val);
          })
    }
    return {
      data,
      payment
    }
  },
  beforeUnmount() {
    sessionStorage.removeItem('orderid');
  }

}
</script>
